<template>
  <div class="HMFW_Map">
    <div class="menuList">
      <SubMenu :Routes="Routes" @onSelectNav="onSelectNav" :path="path"></SubMenu>
    </div>
    <div class="content">
      <transition name="fade" mode="out-in">
        <component :is="component" :path="path"></component>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import SubMenu from '@/components/Navbar/SubMenu.vue';
import useMapStore from '@/store/modules/map';
import { ref } from 'vue';
import type { TabsInstance } from 'element-plus';
import DJTJ from './DJTJ.vue';
import ZBHD from './ZBHD.vue';
import XCRC from './XCRC.vue';
import CXJF from './CXJF.vue';
import YJZJ from './YJZJ.vue';
import CWDT from './CWDT.vue';
const tabPosition = ref<TabsInstance['tabPosition']>('left');
const path = ref('/djtj');
const Routes = [
  {
    Name: '党建引领',
    children: [
      {
        path: '/djtj',
        Name: '党建统计'
      },
      {
        path: '/zbhd',
        Name: '支部活动'
      },
      {
        path: '/xcrc',
        Name: '乡村人才'
      }
    ]
  },
  {
    Name: '诚信积分',
    children: [
      {
        path: '/jfph',
        Name: '积分排行'
      },
      {
        path: '/jfdh',
        Name: '积分兑换'
      }
    ]
  },
  {
    path: '/yjzj',
    Name: '意见征集'
  },
  {
    path: '/cwdt',
    Name: '村务动态'
  }
];
const onSelectNav = (item) => {
  path.value = item.path;
  console.log('item', item);
};
const component = computed(() => {
  // console.log('path.value', path.value);
  if (path.value === '/djtj') {
    return DJTJ;
  } else if (path.value === '/zbhd') {
    return ZBHD;
  } else if (path.value === '/xcrc') {
    return XCRC;
  } else if (path.value === '/jfph' || path.value === '/jfdh') {
    return CXJF;
  } else if (path.value === '/yjzj') {
    return YJZJ;
  } else if (path.value === '/cwdt') {
    return CWDT;
  }
  return DJTJ;
});
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
// :deep(.el-dialog) {
//   // background: #2e79b0;
//   // background: rgb(25 61 96);
//   background: url('/images/popupBg.png');
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   color: white;
//   .el-dialog__headerbtn > .el-dialog__close {
//     color: white;
//   }
//   .el-dialog__header {
//     display: contents;
//     padding: 0px 15px;
//   }
//   .el-dialog__title {
//     color: white;
//   }
// }
.HMFW_Map {
  height: 100%;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  .menuList {
    width: 160px;
  }
  .content {
    flex: 1;
  }
}
</style>
